<template>
	<view class="demo">
		<!-- navBar -->
		<view class="d_navBar">
			<!-- <nav-bar background="transparent" isBack backColor="#fff"></nav-bar> -->
			<nav-bars ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
				:title="titleText">
			</nav-bars>
		</view>

		<!-- banner -->
		<view class="d_banner">
			<view class="i_tBtn" @click="dviewr(info.display_url)" v-if="info.display_url">
				<view class="i_tbImg">
					<image src="@/static/home/3d.png"></image>
				</view>
				<view class="i_tbTxt">3D</view>
			</view>
			<swiper class="swiper" autoplay interval="4200" duration="300" @change='bannerChange'>
				<!-- <view v-if="thumb_url.length>0"> -->
				<swiper-item v-for="(item,index) in thumb_url" :key="index" v-if="thumb_url.length>0">
					<view class="d_bItem">
						<image :src="item.path" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item v-else>
					<view class="d_bItem">
						<image :src="thumb_url[0].path" mode="widthFix"></image>
					</view>
				</swiper-item>
				<!-- </view> -->
				<!-- <view v-else>
				</view> -->
			</swiper>
			<view class="d_bDots">
				<view v-for="(item, index) in thumb_url" :key="index">
					<view class="d_bDot" :class="{'active': index == bannerIndex}">
						<view class="d_bIcon"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="d_content">
			<view class="d_cTitle">{{info.title}}</view>
			<view class="d_cInfo">
				<text class="pR-32">报价：{{info.offer}}万</text>
				<text>{{info.area}}m² |</text>
				<text v-for="(item,index) in design_style" v-if="index===0"
					style="margin-left:8rpx;">{{item.name}}</text>
			</view>
			<view class="d_cUser">
				<view class="d_cuHeadimg" @tap="toDetail(info.designer_id)">
					<image :src="avatar.path"></image>
				</view>
				<view class="d_cuFocus" @tap="focusSDesigner">
					<view class="d_cuBtn" :class="{'active': isFocus}">{{isFocus ? '已关注' : '+关注'}}</view>
				</view>
				<view class="d_cuCont" @tap="toDetail(info.designer_id)">
					<view class="d_cuName omit-1">{{info.designer_name}}</view>
					<view class="d_cuFans">{{info.fans_num}}人关注</view>
				</view>
			</view>
			<view class="d_cTextarea">
				<!-- 标签：d_ctTit/d_ctTxt/d_ctImg -->
				<!-- <view class="d_ctTit">业主诉求</view>
				<view class="d_ctTxt">卫生间空间比较大，相反厨房空间反而不够用，需要在格局上进行调整，满足屋主的使用需求。</view>
				<view class="d_ctImg"></view> -->
				<view class="d_ctTxt">
					<u-parse :html="details"></u-parse>
					<!-- <rich-text :nodes="details | formatRichText" selectable='true'></rich-text> -->
				</view>
				<view class="d_ctShop" @tap="toPage('demo_shop')">
					<view class="d_ctShop-icon">
						<image src="/static/common/icon_more.png"></image>
					</view>
					<view class="d_ctShop-txt">包含商品({{product.length}}):</view>
					<view class="d_ctShop-imgs">
						<view class="d_ctShop-img" v-for="(item,index) in info.product" :key="index" v-if="index<4">
							<image :src="item.main_imgurl.path"></image>
						</view>
					</view>
				</view>
				<view class="d_cAuth">
					<view class="d_caTxt">创建于 {{time |formatDate}}</view>
					<view class="d_caTxt">文章由作者自行上传，仅代表作者本人观点。</view>
				</view>
			</view>
		</view>

		<!-- 评论 -->
		<view class="d_evaluate">
			<view class="d_eTitle">评论<text>({{info.comment_num}})</text></view>
			<view class="d_eList">
				<view v-for="(comment,index) in commentList" :key="index">
					<view class="d_eItem">
						<view class="d_eHead" v-if="comment.user_id.avatar">
							<image :src="comment.user_id.avatar.path"></image>
						</view>
						<view class="d_eHead" v-else>
							<image src="https://manager.ryz1620.com/static/my/avator.png"></image>
						</view>
						<view class="d_eCont">
							<view @tap="dync_commentSelectReply(comment.id, comment.user_id.username)">
								<view class="d_eName">{{comment.user_id.username}}
									<!-- <view class="d_eAuth">作者</view> -->
								</view>
								<view class="d_eTxt">{{comment.content}}</view>
								<view class="d_eTxt">
									<view class="d_eTip" style="padding-left: 0;">{{comment.createTime}}</view>
									<view class="d_eTip" @tap.top="getcommentdel(comment.id)"
										v-if="comment.user_id.id == useid">删除</view>
									<view class="d_eTip" v-else style="color: #333;">回复</view>
								</view>
							</view>
							<view class="d_eIts">
								<view v-for="(reply,indes) in comment.sub_reply" :key="indes">
									<view class="d_eiItem"
										@tap="dync_commentSelectReply(reply.id, reply.user_id.username)">
										<view class="d_eiHead" v-if="reply.user_id.avatar.path">
											<image :src="reply.user_id.avatar.path"></image>
										</view>
										<view class="d_eiHead" v-else>
											<image src="https://manager.ryz1620.com/static/my/avator.png"></image>
										</view>
										<view class="d_eiCont">
											<view class="d_eiName">{{reply.user_id.username}}</view>
											<view class="d_eiTxt">
												<view v-if="reply.isReplay" style="color: #666; font-size: 20rpx;">
													回复<text class="d_eiReply">{{reply.reply_id.username}}</text>：
												</view>
												{{reply.content}}
											</view>
											<view class="d_eiTxt">
												<view class="d_eiTip">{{reply.createTime}}</view>
												<view class="d_eiTip" @tap.top="getcommentdel(reply.id)"
													v-if="reply.user_id.id == useid">删除</view>
												<view class="d_eiTip" v-else style="color: #333;">回复</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 评论框 -->
		<view class="d_talk">
			<view class="d_tShim"></view>
			<view class="d_tBox">
				<view class="d_tFuns">
					<view class="d_tFun" @click="is_show_model=true">
						<view class="d_tIcon iconfont icon-transpond"></view>
						<view class="d_tTxt">转发</view>
					</view>
					<view class="d_tFun" @click="trendStore(info)">
						<view class="d_tIcon" v-if="info.support_status == 1">
							<image src="/static/common/icon_collection.png"></image>
						</view>
						<view class="d_tIcon" v-else>
							<image src="/static/common/icon_collection2.png"></image>
						</view>
						<view class="d_tTxt">{{info.support_num}}</view>
					</view>
				</view>
				<!-- <view class="d_tInput"><input type="text" v-model="comment" @confirm="commentAuth" placeholder="评论一下吧~" placeholder-class="placeholder"/></view> -->
				<view class="d_tInput" v-if="!commentReplyName"><input type="text" placeholder-class="placeholder"
						:focus="commentFocus" v-model="content"
						:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
						@confirm="dync_comment" @input="inputKey($event, 'comment')" />
				</view>
				<view class="d_tInput" v-else>
					<input type="text" placeholder-class="placeholder" :focus="commentFocus" v-model="content"
						:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
						@confirm="dync_commentReply" @input="inputKey($event, 'comment')" />
				</view>
			</view>
		</view>

		<!-- 浮窗按钮 -->
		<view class="d_fixed">
			<view class="d_fBtn" @tap="toPage('demo_shop')">
				<view class="d_fcIcon">
					<image src="/static/common/icon_fixed2.png"></image>
				</view>
				<view class="d_fcTxt">清单</view>
			</view>
			<!-- <view class="d_fBtn" @tap="popCatalog = true">
				<view class="d_fcIcon"><image src="/static/common/icon_fixed1.png"></image></view>
				<view class="d_fcTxt">目录</view>
			</view> -->
		</view>

		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model?'show':'']" @click.stop="is_show_model=false">
			<view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"
				@click.stop="">
				<view class="md-content">
					<view class="md-content-item">
						<view class="s_bIcon iconfont icon-friend"></view>
						<view>分享给好友</view>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share" @click="is_show_model=false" class="sharebtn"></button>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS-->
						<button @click="actionsheettip" class="sharebtn"></button>
						<!-- #endif -->
					</view>
					<view class="md-content-item" @click="popShareToPicture">
						<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
						<view>生成分享大图</view>
					</view>
				</view>
				<view class="cancel" @click="is_show_model=false">取消</view>
			</view>
		</view>

		<!-- 目录 -->
		<view class="d_catalog" :class="{'active': popCatalog}">
			<view class="d_cBg"></view>
			<view class="d_cContain">
				<view class="d_cShade" @tap="popCatalog = false"></view>
				<view class="d_cBox">
					<view class="d_cClose" @tap="popCatalog = false">
						<view class="iconfont icon-cancel"></view>
					</view>
					<view class="d_cTitle">目录</view>
					<view class="d_cList">
						<view class="d_cItem">
							<view class="d_cArrow">
								<view class="iconfont icon-more"></view>
							</view>
							<view class="d_cName">业主诉求</view>
						</view>
						<view class="d_cItem">
							<view class="d_cArrow">
								<view class="iconfont icon-more"></view>
							</view>
							<view class="d_cName">设计方案</view>
						</view>
						<view class="d_cItem">
							<view class="d_cArrow">
								<view class="iconfont icon-more"></view>
							</view>
							<view class="d_cName">户型图</view>
							<view class="d_cImgs">
								<view class="d_cImg"></view>
							</view>
						</view>
						<view class="d_cItem">
							<view class="d_cArrow">
								<view class="iconfont icon-more"></view>
							</view>
							<view class="d_cName">卫生间</view>
							<view class="d_cImgs">
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
							</view>
						</view>
						<view class="d_cItem">
							<view class="d_cArrow">
								<view class="iconfont icon-more"></view>
							</view>
							<view class="d_cName">厨房</view>
							<view class="d_cImgs">
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
								<view class="d_cImg"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_design from '@/service/design'
	import service_mall from '@/service/mall.js'
	import service_decoration from '@/service/decoration.js'
	export default {
		data() {
			return {
				// 关注
				isFocus: false, // 是否关注该设计师
				caseId: null,
				isSupport: false,
				info: {},
				popShare: false, // 弹窗-分享
				popCatalog: false, // 弹窗-目录
				// 评论
				// 评论
				commentPage: 0,
				commentTime: 0,
				commentList: [],
				comment: '',
				replyId: null,
				content: '',
				useid: '',
				commentIsReply: false,
				commentLoading: false,
				commentReplyId: '',
				commentReplyName: '',
				commentFocus:false,
				// 轮播图
				bannerIndex: 0,
				bannerCurrent: 0,
				details: '',
				time: '',
				userId: '',
				is_show_model: false, //是否显示分享模态窗
				scrollTop: 0,
				titleText: '',
				thumb_url: [], //轮播图
				commentFocus: false,
				avatar: {},
				design_style: [],
				product: [],
				quality: '',
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop >= 100) {
				this.titleText = '案例详情'
			} else {
				this.titleText = ''
			}
		},
		onLoad(params) {
			this.$utils.getUrl()
			let scene = decodeURIComponent(params.scene);
			let token = uni.getStorageSync('token')
			scene = scene.split("&");
			let obj = {}
			for (let i = 0; i < scene.length; i++) {
				let newscene = scene[i].split("=");
				obj[newscene[0]] = newscene[1];
			}
			if (obj.caseId) {
				this.caseId = obj.caseId
				this.getDetail(obj.caseId)

			} else {
				this.caseId = params.caseId
				this.getDetail(params.caseId)
			}
			if (params.share_uid) {
				let shareuId = params.share_uid
				this.$store.commit('index/SET_shareuId', shareuId)
				if (token && shareuId) {
					service_mall.getPromoter({
							share_uid: shareuId
						})
						.then(res => {
							shareuId = ''
							this.$store.commit('index/SET_token', shareuId)
						})
				}
			}
			if (obj.share_uid) {
				let shareuId = obj.share_uid
				this.$store.commit('index/SET_shareuId', shareuId)
				if (token && shareuId) {
					service_mall.getPromoter({
							share_uid: shareuId
						})
						.then(res => {
							shareuId = ''
							this.$store.commit('index/SET_token', shareuId)
						})
				}
			}
			this.dyna_getComment()
			this.gettrace()
			this.userId = uni.getStorageSync('userId')
		},
		onShow(options) {
			let token = uni.getStorageSync('token');
			let shareuId = this.$store.state.index.shareuId
			if (token && shareuId) {
				service_mall.getPromoter({ share_uid: shareuId }).then(res => {
					shareuId = ''
					this.$store.commit('index/SET_token', shareuId)
				});
			}
		},
		onShareAppMessage(res) {
			// let that = this
			if (res.from === 'button') {}
			this.getgetforwards()
			return {
				title: this.info.title,
				path: '/pages_design/pages/design/demo/demo?caseId=' + this.caseId + '&share_uid=' + this.userId,
				success: function(res) {
					// that.getgetforwards()
				}
			}
		},
		onShareTimeline(res) {
			if (res.from === 'menu') {
			}
			return {
				title: this.info.title,
				path: '/pages_design/pages/design/demo/demo?caseId=' + this.caseId + '&share_uid=' + this.userId,
				success: function(res) {
					// that.getgetforwards()
				}
			};
		},
		filters: {
			formatRichText(html) { //控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="width:100%;max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
			}
		},
		methods: {
			// 记录足迹
			gettrace() {
				service_design.gettrace({
						case_id: this.caseId
					})
					.then(res => {})
			},
			// 跳转设计师详情页面
			toDetail(designerId) {
				uni.navigateTo({
					url: '/pages_design/pages/design/personal/personal?designerId=' + designerId
				})
			},
			// 转发
			getgetforwards() {
				service_design.getforward({
						case_id: this.caseId
					})
					.then(res => {})
			},
			dviewr(item) {
				let url = encodeURIComponent(item)
				uni.navigateTo({
					url: '/pages_3D/pages/3D/panorama?url=' + url
				});
			},
			// 关注or取消关注
			focusSDesigner() {
				let follow = this.isFocus
				if (follow != 0) {
					this.type = 0
					uni.showModal({
						title: '提示',
						content: '确认取消关注?',
						success: (res) => {
							if (res.confirm) {
								service_design.focusDesigner({
										designerId: this.info.designer_id,
										status: 0
									})
									.then(res => {
										if (res.code == 1) {
											this.isFocus = this.type == 1
										} else {
											this.$utils.showErr({
												title: res.msg
											})
										}
									})
								this.popFocus = false

							} else if (res.cancel) {
								return
							}
						}
					});
				} else {
					this.type = 1
					service_design.focusDesigner({
							designerId: this.info.designer_id,
							status: 1
						})
						.then(res => {
							if (res.code == 1) {
								this.isFocus = this.type == 1
							} else {
								this.$utils.showErr({
									title: res.msg
								})
							}
						})
					this.popFocus = false
				}

			},
			// 获取详情数据
			getDetail(caseId) {
				service_design.getDemoDetail({
						caseId
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data;
							this.info = data;
							this.isFocus = data.user_follow_status == 1 ? true : false;
							this.details = data.content;
							this.time = data.create_time;
							this.thumb_url = data.thumb_url;
							this.avatar = data.avatar;
							this.design_style = data.design_style;
							this.product = data.product;
						}
					})
			},
			// 案例点赞
			trendStore(item) {
				let status = item.support_status
				if (status == 1) {
					uni.showModal({
						title: '提示',
						content: '确认取消点赞?',
						success: (res) => {
							if (res.confirm) {
								service_design.supportDemo({
										case_id: this.caseId,
										status: 0
									})
									.then(res => {
										if (res.code == 1) {
											this.info.support_status = 0
											this.info.support_num--
										} else {
											this.$utils.showErr({
												title: res.msg
											})
										}
									})
							} else if (res.cancel) {
								return
							}
						}
					});
				} else {
					service_design.supportDemo({
							case_id: this.caseId,
							status: 1
						})
						.then(res => {
							if (res.code == 1) {
								this.info.support_status = 1
								this.info.support_num++
							} else {
								this.$utils.showErr({
									title: res.msg
								})
							}
						})

				}

			},
			// 输入框输入内容事件
			inputKey(event, key) {
				this[key] = event.detail.value
			},
			moveHandle() {},
			// 获取设计动态的评价内容
			dyna_getComment() {
				this.commentTime++
				let commentTime = this.commentTime
				let commentPage = this.commentPage + 1
				// 获取评论数据
				service_design.getDemoComment({
						case_id: this.caseId,
						page: commentPage
					})
					.then(res => {
						if (this.commentTime === commentTime) {

							if (res.code == 1) {
								let data = res.data
								let list = this.v || []
								// 处理数据
								let nowTime = Date.now()
								for (let i = 0; i < data.length; i++) {
									data[i].create_time *= 1000
									data[i].createTime = this.$utils.getDateDiff(data[i].create_time)
									// 处理回复数据
									let replayList = data[i].sub_reply
									if (replayList && replayList.length) {
										for (let j = 0; j < replayList.length; j++) {
											replayList[j].create_time *= 1000
											replayList[j].createTime = this.$utils.getDateDiff(replayList[j]
												.create_time, )

											// 是否是回复 回复数据 的数据
											if (data[i].id !== replayList[j].parent_id) replayList[j].isReplay = true
										}
									}
									// 保存数据
									list.push(data[i])
								}

								this.commentPage++
								this.commentList = list
							}
						}
					})
					.catch(err => {
						if (this.commentTime === commentTime) {
							this.commentLoading = false
						}
					})
			},
			// 评论
			dync_comment() {
				let content = this.content
				service_design.commentDemo({
						case_id: this.caseId,
						content: content
					})
					.then(res => {
						if (res.code == 1) {
							this.TrendPage = 0
							this.commentPage = 0
							this.commentList = []
							this.case_idnum++
							this.content = ''
							this.dyna_getComment()
							this.getDetail()
						}
					})
					.catch(err => {

					})
			},
			// 回复他人评论
			dync_commentSelectReply(id, name) {
				this.commentIsReply = true
				this.commentReplyId = id
				this.commentReplyName = name
				this.content = ''
			},
			// 发布回复评论
			dync_commentReply() {
				service_design.replyDemo({
						comment_id: this.commentReplyId,
						content: this.content
					})
					.then(res => {
						if (res.code == 1) {
							this.commentIsReply = false
							this.commentPage = 0
							this.commentList = []
							this.commentReplyId = ''
							this.commentReplyName = ''
							this.content = ''
							this.dyna_getComment()
						}
					})
					.catch(err => {

					})
			},
			// 获取更多评论内容
			dync_commentNext(e) {
				this.dyna_getComment()
			},
			// 删除评论
			getcommentdel(id) {
				uni.showModal({
					title: '提示',
					content: '确认删除评论?',
					success: (res) => {
						if (res.confirm) {
							service_design.replyDemodel({
									comment_id: id
								})
								.then(res => {
									if (res.code == 1) {
										this.TrendPage = 0
										this.commentPage = 0
										this.commentList = []
										this.case_idnum--
										this.content = ''
										this.dyna_getComment()
										this.getTrend()
									} else {
										this.$utils.showErr({
											title: res.msg
										})
									}
								})
						} else if (res.cancel) {
							return
						}
					}
				});
			},

			toPage(page) {
				if (page === 'demo_shop') {
					uni.navigateTo({
						url: '/pages_design/pages/design/demo/shop?caseId=' + this.caseId
					})
				} else if (page === 'demo_share') {
					uni.navigateTo({
						url: '/pages_design/pages/design/demo/share?caseId=' + this.caseId
					})
				}
			},

			// 轮播图
			bannerChange(e) {
				this.bannerIndex = e.detail.current
			},
			// 关闭弹窗
			popShareClose() {
				this.popShare = false
			},
			// 跳转-海报页面
			popShareToPicture() {
				uni.navigateTo({
					url: '/pages_design/pages/design/demo/share?caseId=' + this.caseId
				})
			},
			// app分享
			actionsheettip() {
				let title = this.info.title;
				let imageUrl = this.thumb_url[0].path;
				let path = '/pages_design/pages/design/demo/demo?caseId=' + this.caseId + '&share_uid=' + this.userId;
				var that = this;
				// 压缩图片 图文分享要求分享图片大小不能超过20Kb
				var quality;
				uni.getImageInfo({
					src: this.thumb_url[0].path,
					success: res => {
						console.log(res.width + '===' + res.height)
						if (res.width >= 3800) {
							setTimeout(function() {
								quality = 14;
							}, 200)

						} else {
							setTimeout(function() {
								quality = 25;
							}, 200)
						}
					}
				});
				uni.downloadFile({
					url: imageUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.compressImage({
								src: res.tempFilePath,
								quality: quality,
								success: ress => {
									var tempFilePath = ress.tempFilePath;
									that.$common.appShare(title, tempFilePath, path, result => {
										if (result == 'success') {
											that.getgetforwards();
										}
									})
								}
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.demo {

		// navBar=====
		.d_navBar {
			height: 0;
			position: relative;
			z-index: 500;
		}

		// banner=====
		.d_banner {
			height: 500rpx;
			background: #f0f0f0;
			position: relative;
			z-index: 1;

			.d_bItem {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.d_bTag {
				height: 58rpx;
				line-height: 58rpx;
				color: #fff;
				font-size: 24rpx;
				padding: 0 24rpx;
				border-radius: 28rpx;
				background: rgba(51, 51, 51, .8);
				position: absolute;
				bottom: 78rpx;
				right: 36rpx;
			}

			.d_bDots {
				width: 100%;
				position: absolute;
				bottom: 66rpx;
				left: 0;
				display: flex;
				justify-content: center;
			}

			.d_bDot {
				width: 24rpx;
				height: 36rpx;

				&.active .d_bIcon {
					background: #ffd425;
				}

				.d_bIcon {
					width: 12rpx;
					height: 12rpx;
					margin: 12rpx auto 0;
					border-radius: 50%;
					background: rgba(255, 255, 255, .5);
				}
			}
		}

		// 内容=====
		.d_content {
			padding: 40rpx 0;
			margin-top: -58rpx;
			border-radius: 20rpx;
			background: #fff;
			position: relative;
			z-index: 2;

			.d_cTitle {
				min-height: 56rpx;
				line-height: 56rpx;
				font-size: 40rpx;
				font-weight: bold;
				padding: 0 32rpx;
			}

			.d_cInfo {
				min-height: 34rpx;
				line-height: 34rpx;
				color: #939393;
				font-size: 24rpx;
				padding: 0 36rpx;
				margin-top: 20rpx;
			}

			// 用户信息
			.d_cUser {
				height: 128rpx;
				margin: 60rpx 32rpx 0;
				border-radius: 64rpx;
				background: #f9f6f3;
			}

			.d_cuHeadimg {
				width: 88rpx;
				height: 88rpx;
				margin: 20rpx 16rpx 0 20rpx;
				border-radius: 50%;
				background: #f0f0f0;
				float: left;
				overflow: hidden;
			}

			.d_cuFocus {
				height: 128rpx;
				padding: 0 40rpx 0 28rpx;
				float: right;
			}

			.d_cuBtn {
				width: 136rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				color: #fff;
				font-size: 20rpx;
				margin-top: 40rpx;
				border-radius: 28rpx;
				background: #333;
				position: relative;
				box-sizing: border-box;
				// &::before, &::after {content: "";width: 2rpx;height: 12rpx;border-radius: 4rpx;background: #fff;position: absolute;top: 50%;left: 36rpx;transform: translateY(-50%);}
				// &::after {transform: translateY(-50%) rotate(90deg);transform-origin: 50% 50%;}
			}

			.d_cuBtn.active {
				background: #dedede;

			}

			.d_cuCont {
				padding-top: 26rpx;
				overflow: hidden;
			}

			.d_cuName {
				height: 44rpx;
				line-height: 44rpx;
				font-size: 32rpx;
			}

			.d_cuFans {
				height: 34rpx;
				line-height: 34rpx;
				color: #939393;
				font-size: 24rpx;
			}

			// 富文本内容
			.d_ctTit {
				line-height: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
				padding: 0 32rpx;
				margin-top: 60rpx;
			}

			.d_ctTxt {
				line-height: 44rpx;
				padding: 0 36rpx;
				margin-top: 28rpx;
			}

			.d_ctImg {
				height: 376rpx;
				margin: 28rpx 32rpx 0;
				border-radius: 8rpx;
				background: #f0f0f0;
				overflow: hidden;
			}

			.d_ctShop {
				height: 106rpx;
				line-height: 106rpx;
				font-weight: bold;
				padding: 0 64rpx 0 40rpx;
				margin: 28rpx 32rpx 0;
				border-radius: 10rpx;
				background: #f6f7fb;
				position: relative;
			}

			.d_ctShop-icon {
				width: 32rpx;
				height: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 30rpx;
			}

			.d_ctShop-txt {
				float: left;
			}

			.d_ctShop-imgs {
				overflow: hidden;
			}

			.d_ctShop-img {
				width: 66rpx;
				height: 66rpx;
				margin: 20rpx 0 0 28rpx;
				border-radius: 4rpx;
				background: #fff;
				overflow: hidden;
				float: left;
			}

			.d_cAuth {
				padding: 0 36rpx;
				margin-top: 80rpx;
			}

			.d_caTxt {
				line-height: 44rpx;
				color: #939393;
				font-size: 24rpx;
			}
		}

		// 评论=====
		.d_evaluate {
			padding: 40rpx 0;
			background: #fff;

			.d_eTitle {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
				padding-left: 36rpx;

				&>text {
					font-size: 24rpx;
					font-weight: bold;
					padding-left: 8rpx;
				}
			}

			.d_eList {
				padding-left: 32rpx;
			}

			.d_eItem {
				margin-top: 30rpx;

				&:nth-last-child(1) .p_eCont::after {
					content: none;
				}
			}

			.d_eHead,
			.d_eIts .d_eiHead {
				width: 66rpx;
				height: 66rpx;
				margin-right: 16rpx;
				border-radius: 50%;
				background: #f0f0f0;
				float: left;
			}

			.d_eCont {
				padding-bottom: 28rpx;
				position: relative;
				overflow: hidden;

				&::after {
					content: "";
					width: 100%;
					height: 1px;
					background: #f4f4f4;
					position: absolute;
					bottom: 0;
					left: 0;
					transform: scaleY(.5);
				}
			}

			.d_eName,
			.d_eIts .d_eiName {
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 20rpx;
			}

			.d_eAuth,
			.d_eIts .d_eiAuth {
				width: 64rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #333;
				font-size: 20rpx;
				margin-left: 8rpx;
				border-radius: 28rpx;
				background: #f6f7fb;
				display: inline-block;
			}

			.d_eTxt,
			.d_eIts .d_eiTxt {
				min-height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				padding-right: 32rpx;
				margin-top: 4rpx;
			}

			.d_eTip,
			.d_eIts .d_eiTip {
				color: #939393;
				font-size: 20rpx;
				padding-left: 16rpx;
				display: inline-block;
			}

			// 他人回复
			.d_eiItem {
				margin-top: 16rpx;
			}

			.d_eiCont {
				overflow: hidden;
			}

			.d_eiReply {
				color: #939393;
				font-size: 20rpx;
				padding: 0 4rpx;
			}
		}

		// 评论框=====
		.d_talk {
			.d_tShim {
				height: 96rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}

			.d_tBox {
				width: 100vw;
				height: 96rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				background: #fff;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 101;
				box-shadow: 0 0 12rpx 0 rgba(155, 155, 155, .16);
			}

			.d_tFuns {
				padding-left: 30rpx;
				float: right;
			}

			.d_tFun {
				width: 110rpx;
				height: 96rpx;
				float: right;
			}

			.d_tIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #6c6c6c;
				font-size: 40rpx;
				margin: 0 auto;
				padding-top: 14rpx;
				box-sizing: content-box;
			}

			.d_tTxt {
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #939393;
				font-size: 20rpx;
			}

			.d_tInput {
				height: 60rpx;
				margin: 20rpx 0 0 32rpx;
				border-radius: 60rpx;
				overflow: hidden;

				&>input {
					width: 100%;
					height: 100%;
					font-size: 24rpx;
					padding: 0 28rpx;
					background: #f6f7fb;
				}
			}
		}

		// 浮窗按钮=====
		.d_fixed {
			position: fixed;
			right: 32rpx;
			bottom: 220rpx;
			z-index: 53;

			.d_fBtn {
				width: 108rpx;
				height: 108rpx;
				margin-top: 22rpx;
				border-radius: 50%;
				background: #fff;
				box-shadow: 0 0 20rpx #dedede;
				overflow: hidden;

				&:active {
					opacity: .92;
				}
			}

			.d_fcIcon {
				width: 40rpx;
				height: 40rpx;
				margin: 18rpx auto 0;
			}

			.d_fcTxt {
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				font-size: 24rpx;
			}
		}

		// 目录 
		.d_catalog {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
			visibility: hidden;
			transition: visibility .3s;

			&.active {
				visibility: visible;

				.d_cBg {
					opacity: 1;
				}

				.d_cContain {
					transform: translateY(0);
				}
			}

			.d_cBg {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, .6);
				opacity: 0;
				transition: opacity .3s;
			}

			.d_cContain {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				flex-flow: column;
				transition: transform .3s;
				transform: translateY(100%);
			}

			.d_cShade {
				height: 256rpx;
			}

			.d_cBox {
				border-radius: 24rpx 24rpx 0 0;
				background: #fff;
				position: relative;
				overflow: hidden;
				display: flex;
				flex-flow: column;
				flex: 1;
			}

			.d_cClose {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #333;
				font-size: 40rpx;
				padding: 16rpx;
				position: absolute;
				top: 30rpx;
				right: 16rpx;
				box-sizing: content-box;
			}

			.d_cTitle {
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-weight: bold;
				padding: 40rpx 0 30rpx;
				box-sizing: content-box;
			}

			.d_cList {
				overflow-y: auto;
				flex: 1;
			}

			.d_cItem {
				padding: 30rpx 0;
				position: relative;
			}

			.d_cArrow {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				color: #939393;
				font-size: 32rpx;
				position: absolute;
				top: 34rpx;
				right: 32rpx;
			}

			.d_cName {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				padding-left: 36rpx;
			}

			.d_cImgs {
				padding: 14rpx 0 0 32rpx;
				overflow: hidden;
			}

			.d_cImg {
				width: 220rpx;
				height: 220rpx;
				margin: 14rpx 14rpx 0 0;
				border-radius: 4rpx;
				background: #f0f0f0;
				float: left;
			}
		}
	}

	.cu-modal {
		position: fixed;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		top: 0;
		display: none;
		width: 100%;
		z-index: 500;
	}

	.show {
		display: block;
	}

	.bottom-md {
		position: absolute;
		bottom: 0;
		background: #fff;
	}

	.share {
		position: fixed;
		color: #FFFFFF;
		right: 0;
		bottom: 190rpx;
		background: linear-gradient(to bottom right, #FE726B, #FE956B);
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		box-shadow: 0 0 20upx rgba(0, 0, 0, .09);
	}

	.cancel {
		width: 100vw;
		padding: 30rpx;
		text-align: center;
		background: #FFFFFF;
		color: #888;
		font-weight: normal;
		font-size: 30rpx;
	}

	.md-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0;
	}

	.md-content-item {
		margin: 0 90rpx;
		position: relative;
	}

	.md-content-item image {
		width: 100rpx;
		height: 100rpx;
		margin: auto;
	}

	.md-content-item view {
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.sharebtn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}

	.md-content-item .s_bIcon {
		font-size: 72rpx;
	}

	.s_bIcon {
		width: 112rpx;
		height: 112rpx;
		color: #fff;
		font-size: 140rpx;
		margin: 60rpx auto 0;
		border-radius: 50%;
		background: #8bc37a;
		box-shadow: 0 0 12rpx rgba(0, 0, 0, .16);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s_bIcons {
		background: #ffd425;
	}

	.i_tBtn {
		width: 102rpx;
		height: 102rpx;
		background: rgba(0, 0, 0, .4);
		border: 1px solid #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}

	.i_tbImg {
		width: 42rpx;
		height: 42rpx;
		margin: 20rpx auto 0;
	}

	.i_tbTxt {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 58rpx;
		left: 0;
	}
</style>
